import React, { useState } from 'react'
import { Table, Tag, Button, Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { menuDelete } from '../../request/api';


export default function List(props) {
    const { getMenuList, menulist } = props
    let [newId, setId] = useState(0)
    const columns = [
        {
            title: '菜单编号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '菜单名称',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '上级菜单',
            dataIndex: 'pid',
            key: 'pid'
        },
        {
            title: '菜单图标',
            dataIndex: 'icon',
            key: 'icon',
        },
        {
            title: '菜单地址',
            dataIndex: 'url',
            key: 'url',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text, record) =>
                <div>
                    {record.status == 1 ? <Tag color="success">启用</Tag> : <Tag color="error">禁用</Tag>}
                </div>
        },
        {
            title: '操作',
            render: (text, record) =>
                <div>
                    <Button type="primary" size='small' onClick={() => edit(record.id)}>编辑</Button>
                    <Button type="danger" size='small' style={{ margin: '0 10px' }} onClick={() => del(record.id)}>删除</Button>
                </div>
        },
    ];

    function edit(id) {
        props.edit(id)
    }
    function del(id) {
        // console.log(id);
        setDel(true);
        setId(id)
    }

    const [delShow, setDel] = useState(false);

    const hideModal = () => {
        setDel(false);
    };

    const confirmDel = () => {
        menuDelete({
            id: newId
        }).then(res => {
            console.log(res, '菜单删除');
            if (res.code == 200) {
                hideModal()
                getMenuList()
                message.success(res.msg)
            } else {
                hideModal()
                message.error(res.msg)
            }
        })
    }
    return (
        <div>
            <Table
                rowKey='id'
                columns={columns}
                dataSource={menulist}
                bordered
                pagination={false}
            />

            <>
                <Modal
                    visible={delShow}
                    onOk={confirmDel}
                    onCancel={hideModal}
                    okText="确认"
                    cancelText="取消"
                    title='警告！！'
                >

                    <p>
                        <ExclamationCircleOutlined />
                        你确定要删除吗？？
                    </p>

                </Modal>
            </>
        </div>
    )
}
